<template>
  <view class="index-container">
    <view></view>
    <view class="page-container">
      <home v-if="pageIndex === 'home'" :banner-list="bannerList" :strategy-list="strategyList" :activity-list="activityList" @to-find-page="changePage('find')" />
      <find v-if="pageIndex === 'find'" />
      <order v-if="pageIndex === 'order'" />
      <mine v-if="pageIndex === 'mine'" />
      <parking v-if="pageIndex === 'parking'" @changeTab="changePage" />
    </view>
    <view class="tabs-container">
      <view class="tab" @click="changePage('home')">
        <img v-if="pageIndex === 'home'" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/index_slices/icon_home_1@3x.png'" alt="">
        <img v-else :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_home@3x.png'" alt="">
        <text :class="pageIndex === 'home' ? 'active' : ''">首页</text>
      </view>
      <view class="tab" @click="changePage('parking')">
        <img v-if="pageIndex === 'parking'" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/parking_imgs/icon-parking-active.png'" alt="">
        <img v-else :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/parking_imgs/icon-parking.png'" alt="">
        <text :class="pageIndex === 'parking' ? 'active' : ''">停车</text>
      </view>
      <view class="tab" @click="findTabClick" :style="pageIndex === 'find' ? findTabActiveStyle : {}">
        <img v-if="pageIndex === 'find'" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/find_imgs/push.png'" alt="" style="width: 25px">
        <img v-else :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/index_slices/icon_find@3x.png'" alt="">
        <text v-if="pageIndex != 'find'" :class="pageIndex === 'find' ? 'active' : ''">发现</text>
        <text v-if="pageIndex === 'find'" :class="pageIndex === 'find' ? 'active' : ''">发攻略</text>
      </view>
      <view class="tab" @click="changePage('order')">
        <img v-if="pageIndex === 'order'" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/order_slices/icon_order_1@3x.png'" alt="">
        <img v-else :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/index_slices/icon_order@3x.png'" alt="">
        <text :class="pageIndex === 'order' ? 'active' : ''">订单</text>
      </view>
      <view class="tab" @click="changePage('mine')">
        <img v-if="pageIndex === 'mine'" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_mine_1@3x.png'" alt="">
        <img v-else :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/index_slices/icon_mine@3x.png'" alt="">
        <text :class="pageIndex === 'mine' ? 'active' : ''">我的</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from "vue";

import Home from "./home.vue";
import Order from "./order.vue";
import Mine from "./mine.vue";
import Find from "./find.vue";
import Parking from "./parking.vue";
import Config from "@/Config";

export default Vue.extend({
  components: { Home, Order, Mine, Find, Parking },
	computed: {
		console: () => console
	},
  data() {
    return {
      pageIndex: "home",
      orderStatus: new Config().ORDER_STATUS_ENUM.all,
      bannerList: [],
      strategyList: [],
      activityList: [],
      orderList: [],

      findTabActiveStyle: {
        height: "20vw",
        position: "relative",
        top: "-9vw",
        backgroundColor: "#ffffff",
        borderRadius: "10vw",
        boxShadow: "0px 12px 26px 3px rgba(0, 0, 0, 0.34)"
      }
    }
  },
  onLoad() {
    this.getBanners();
    this.getStrategys();
    this.getActivitys();
  },
  methods: {
    changePage(value: string) {
      this.pageIndex = value;
    },
    getBanners() {
      this.$mainApi.apiGetBannersByPage(0, new Config().INDEX_BANNER_MAX_COUNT).then((res: any) => {
        this.bannerList = res.data.records;
      });
    },
    getStrategys() {
      this.$mainApi.apiGetStrategysByPage(0, new Config().INDEX_STRATEGY_MAX_COUNT).then((res: any) => {
        this.strategyList = res.data.records;
;      });
    },
    getActivitys() {
      this.$mainApi.apiGetActivitysByPage(0, new Config().INDEX_ACTIVITY_PAGE_SIZE).then((res: any) => {
        this.activityList = res.data.records;
      });
    },
    findTabClick() {
      if (this.pageIndex === "find") {
        uni.navigateTo({
          url: "/pages/strategy/post"
        });
      } else {
        this.changePage("find");
      }
    }
  }
});
</script>

<style scoped>
.index-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-container {
  flex-grow: 1;
  overflow: auto;
}

.tabs-container {
  height: 40px;
  flex-shrink: 0;
  padding: 5px 0px;
  background: #FFFFFF;
  box-shadow: 0px 12px 26px 3px rgba(0, 0, 0, 0.34);
  display: flex;
}

.tabs-container .tab {
  width: 20vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tabs-container .tab img {
  width: 20px
}

.tabs-container .tab text {
  color: #9A9A9A;
  font-size: 12px;
}

.tabs-container .tab text.active {
  color: #333333;
}
</style>
